 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>productionDetail</title>
	    <link href="css/mui.css" rel="stylesheet"/>
	    <link rel="stylesheet" href="css/common.css" />
	    <link rel="stylesheet" href="iconfont/iconfont.css" />
	   	<link rel="stylesheet" href="css/productionDetail.css" />
	</head>
	<body>
		<!--作品头部信息-->
		<div>
			<div class='headerLogo'>
				<img src="img/detailheaderlogo.png" alt="" />
				<i class='icon iconfont icon-fanhui gobackLOGO mui-action-back'></i>
				<span class='icon iconfont icon-more moreLOGO'></span>
			</div>
			<div class='productionDatas'>
				<div class='authorDatas'>
					<div class='authorLOGO'>
						<img src="img/ic_food2.png" alt="" />
					</div>
					<div class='authorinfo'>
						<p class='authorName'>陆了了</p>
						<p class='authorAdd'>北京市|插画师</p>
					</div>
				</div>
				<div class='FollowsAuthor'>
					关注
				</div>
			</div>
		</div>
		
		<!--作品内容信息-->
		<div>
			<div class='productInfo'>
				<p class='productTip'>我就是个作品名字</p>
				<div class='productOtherDatas'>
					<p class='productTimes'>2 hours</span>
					<ul class='productOtherDatasBox'>
						<li class='productOtherDatasList'>
							<div class='productOtherDatasLOGO'><i class="inline_logo productOtherDatasLOGO_watch"></i></div>
							<p class='productOtherDatasText'>1035</p>
						</li>
						<li class='productOtherDatasList'>
							<div class='productOtherDatasLOGO'><i class="inline_logo productOtherDatasLOGO_collection"></i></div>
							<p class='productOtherDatasText'>1035</p>
						</li>
						<li class='productOtherDatasList'>
							<div class='productOtherDatasLOGO'><i class="inline_logo productOtherDatasLOGO_comment"></i></div>
							<p class='productOtherDatasText'>1035</p>
						</li>
					</ul>
				</div>
			</div>
			<div class='productMain'>
				<p>首先，感谢田东明老师的邀请参加“你好，童年“北京国际亲子教育绘本展！再次感谢《我怕毛毛虫》和《小鸟饿了》这两幅作品也是特意为这次画展准备的，灵感来源于我小时候的经历因为从小在南方的小山村里长大，每天都在山间野地里嬉闹，下田里挖泥鳅，到河里拔水草，上山里采竹笋，童年的一切都是和大自然发生的，正好这次的主题是“情绪“所以也就有了这两幅作品。</p>
				<img src="img/detailheaderlogo.png" alt="" />
			</div>
		</div>
		
		<!--穿插的小条条-->
		<div class='lll'></div>
		
		<!--作品信息-->
		<div class='productDetail'>
			<p class='productDetail_tip'>作品信息</p>
			<ul>
				<li class='productDetailList'>
					<span class='productDetail_title productDetail_titleName'>创作时间</span>
					<span class='productDetail_main'>2017-10-11</span>
				</li>
				<li class='productDetailList'>
					<span class='productDetail_title productDetail_titleName'>创作时间</span>
					<span class='productDetail_main'>铅笔 新帝数位板 13HD X-T1</span>
				</li>
				<li class='productDetailList'>
					<span class='productDetail_title productDetail_titleName'>创作时间</span>
					<span class='productDetail_main'>禁止个人使用；禁止商业使用</span>
				</li>
				<li class='productDetailList'>
					<span class='productDetail_title productDetail_titleName'>创作时间</span>
					<span class='productDetail_tipName'>手绘</span>
				</li>
			</ul>
		</div>
		
		<!--相关作品-->
		<div class='relevantProduct'>
			<p class='productDetail_tip'>相关作品</p>
			<ul class='relevantProductListBox'>
				<li class='relevantProductList'>
					<img src="img/20171220155203.png" alt="" />
				</li>
				<li class='relevantProductList'>
					<img src="img/20171220155203.png" alt="" />
				</li>
				<li class='relevantProductList'>
					<img src="img/20171220155203.png" alt="" />
				</li>
				<li class='relevantProductList'>
					<img src="img/20171220155203.png" alt="" />
				</li>
			</ul>
		</div>
		
		<!--穿插的小条条-->
		<div class='lll'></div>
		
		<!--评论-->
		<div class='comment'>
			<p class='productDetail_tip comment_title'>评论(<span>10</span>)</p>
			<ul>
				<li class='commentList'>
					<div class='commentUserLOGO'>
						<img src="img/ic_food2.png" alt="" />
					</div>
					<div class='commentDetail'>
						<div class='commentUserInfo'>
							<p class='commentUserName'>傻子吧</p>
							<p class='commentNum'>
								<i class='inline_logo DZ_LOGO active'></i>
								<span class='DZ_num'>10</span>
								<i class='inline_logo PL_LOGO'></i>
							</p>
						</div>
						<p class='comment_issueTime'>1 hours</p>
						<p class='comment_main'>谢谢您的夸奖，你也可以的！</p>
						<div class='comment_main_boxBorder'>
							<div class='comment_main_box'>
								<p class='comment_main'>回复了<a href="" class='comment_toAnswer'>傻子吧</a></p>
								<p class='comment_main'>你画的非常好，真厉害，我一定要好好学习！</p>
							</div>
							<i class='comment_main_jiantou'></i>
						</div>
					</div>
				</li>
				<li class='commentList'>
					<div class='commentUserLOGO'>
						<img src="img/ic_food2.png" alt="" />
					</div>
					<div class='commentDetail'>
						<div class='commentUserInfo'>
							<p class='commentUserName'>傻子吧</p>
							<p class='commentNum'>
								<i class='inline_logo DZ_LOGO'></i>
								<span class='DZ_num'>10</span>
								<i class='inline_logo PL_LOGO'></i>
							</p>
						</div>
						<p class='comment_issueTime'>1 hours</p>
						<p class='comment_main'>谢谢您的夸奖，你也可以的！</p>
					</div>
				</li>
				<li class='commentList'>
					<div class='commentUserLOGO'>
						<img src="img/ic_food2.png" alt="" />
					</div>
					<div class='commentDetail'>
						<div class='commentUserInfo'>
							<p class='commentUserName'>傻子吧</p>
							<p class='commentNum'>
								<i class='inline_logo DZ_LOGO active'></i>
								<span class='DZ_num'>10</span>
								<i class='inline_logo PL_LOGO'></i>
							</p>
						</div>
						<p class='comment_issueTime'>1 hours</p>
						<p class='comment_main'>谢谢您的夸奖，你也可以的！</p>
						<div class='comment_main_boxBorder'>
							<div class='comment_main_box'>
								<p class='comment_main'>回复了<a href="" class='comment_toAnswer'>傻子吧</a></p>
								<p class='comment_main'>你画的非常好，真厉害，我一定要好好学习！</p>
							</div>
							<i class='comment_main_jiantou'></i>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<!--固定的底部-->
		<div class='footer'>
			<p class='reward'>
				<i class='inline_logo reward_logo'></i>
				<span class='reward_text'>打赏</span>
			</p>
			<ul class='footerListBox'>
				<li class='footerList'>
					<i class='inline_logo footer_logo_SC'></i>
					<span class='footerList_text'>100</span>
				</li>
				<li class='footerList'>
					<i class='inline_logo footer_logo_PL'></i>
					<span class='footerList_text'>10</span>
				</li>
				<li class='footerList'>
					<i class='inline_logo footer_logo_DZ'></i>
					<span class='footerList_text'>1</span>
				</li>
				<li class='footerList'>
					<i class='inline_logo footer_logo_BX'></i>
					<span class='footerList_text'>帮宣</span>
				</li>
			</ul>
		</div>
		
		<!--三个小点点点开之后出现的东西-->
		<div class='forward' lll='forward'>
			<ul class='forwardListbox'>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_QQ'></i>
					<span class='forward_text'>QQ</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_WB'></i>
					<span class='forward_text'>微博</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_WX'></i>
					<span class='forward_text'>微信</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_PYQ'></i>
					<span class='forward_text'>朋友圈</span>
				</li>
				<!--<li class='forwardList'>
					<i class='inline_logo forward_logo forward_DEL'></i>
					<span class='forward_text'>删除</span>
				</li>-->
			</ul>
			<p class='forward_cancel'>取消</p>
		</div>
		
		<!--评论框-->
		<div class='commentPage ' lll='commentPage'>
			<div class='commentBorder'>
				<div class='returntoWho'>
					<p class='returnComment'>回复：@傻子吧</p>
					<i class='inline_logo cancel_comment icon iconfont icon-close'></i>
				</div>
				<textarea class='commentBox'>
					
				</textarea>
				<div class='issueComment'>
					<p class='issueCommentBtn'>发布</p>
				</div>
			</div>
		</div>
	</body>
		
<script src='js/pxtorem.js'></script>
<script src="js/mui.js"></script>
<script src="js/apptool.js"></script>
<script>
	mui.init();
	var mo=function(e){e.preventDefault();};
			/***禁止滑动***/
		function stop(){
		        document.body.style.overflow='hidden';        
		        document.addEventListener("touchmove",mo,false);//禁止页面滑动
		}
		
		/***取消滑动限制***/
		function move(){
		        document.body.style.overflow='';//出现滚动条
		        document.removeEventListener("touchmove",mo,false);        
		}
	  mui.plusReady(function(e){
	    //分享
		mui('.moreLOGO')[0].addEventListener('tap',function(){
			mui('div[lll=forward]')[0].classList.add('active');
			stop();
		})
		mui('.forward_cancel')[0].addEventListener('tap',function(e){
			mui('div[lll=forward]')[0].classList.remove('active');
			move();
		})
		//打赏
		mui('.reward')[0].addEventListener('tap',function(){
		 	webtool.openPreView('reward',function(wb){
		 		wb.show('slide-in-right',300);
		 	})
		 })
		//评论
		 mui('.footerListBox>li:nth-child(2)')[0].addEventListener('tap',function(){
		 	mui('div[lll=commentPage]')[0].classList.add('active');
		 	stop();
		 })
		 mui('.icon-close')[0].addEventListener('tap',function(e){
			mui('div[lll=commentPage]')[0].classList.remove('active');
			move();
		})
		//帮宣
		 mui('.footerListBox>li:last-child')[0].addEventListener('tap',function(){
		 	webtool.openPreView('propaganda',function(wb){
		 		wb.show('slide-in-right',300);
		 	})
		 })
	})
</script>
</html>
